'use client'

import { ThemeProvider as NextThemesProvider } from 'next-themes'
import { ConfigProvider, theme } from 'antd'
import { useEffect, useState } from 'react'
import { useTheme } from 'next-themes'
import zhCN from 'antd/locale/zh_CN' // 导入中文语言包

type Attribute = 'class' | 'data-theme' | 'data-mode'

interface ThemeProviderProps {
  children: React.ReactNode
}


// Ant Design 主题配置组件
function AntdConfigProvider({ children }: { children: React.ReactNode }) {
  const { theme: currentTheme } = useTheme()
  const [mounted, setMounted] = useState(false)
  useEffect(() => {
    setMounted(true)
  }, [])
  // 防止 SSR 不匹配
  if (!mounted) {
    return <>{children}</>
  }
  return (
    <ConfigProvider
      locale={zhCN} // 设置中文
      theme={{
        algorithm: currentTheme === 'dark' 
          ? theme.darkAlgorithm 
          : theme.defaultAlgorithm,
        token: {
          // 你可以在这里自定义主题颜色
          colorPrimary: '#2563eb',
        },
      }}
    >
      {children}
    </ConfigProvider>
  )
}
export default function ThemeProvider({ children }: ThemeProviderProps) {
  return (
    <NextThemesProvider 
      attribute={'class' as Attribute}
      defaultTheme="system"
      enableSystem
    >
      <AntdConfigProvider>
      {children}
      </AntdConfigProvider>
    </NextThemesProvider>
  )
} 